<template>
  <div>
    <!-- 回访记录 -->
    <el-card class="card">
      <div class="card_box">
        <div class="left">
          <div class="title">咨询类型：线上咨询</div>
          <div class="title">咨询渠道：来访登记</div>
          <div class="title">咨询人：封腾</div>
          <div class="title">联系方式：111</div>
          <div class="title">与老人关系：父子关系</div>
        </div>
        <div class="right">
          <div class="title">登记日期：2024-11-21</div>
          <div class="title">登记人：lzs</div>
          <div class="title">计划回访日期：2024-11-21</div>
          <div class="title">回访状态：待回访</div>
        </div>
      </div>
    </el-card>
    <el-card class="card">
      <!-- 回访记录 -->
      <div class="header">
        <div class="header_left">
          <span class="line" />
          <span>回访记录</span>
        </div>
        <el-button type="primary" @click="addCall">新增回访</el-button>
      </div>
      <!-- 列表 -->
      <div class="list">
        <div v-for="item in listData" :key="item.id" class="item">
          <div class="left">
            <el-avatar
              style="margin-left: 2%"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <div class="txt">
              <div class="addtime">{{ item.addTime }}</div>
              <div class="color">回访记录：{{ item.content }}</div>
              <div class="color" style="font-size: 12px">计划回访日期：{{ item.callbackTime }}</div>
            </div>
          </div>
          <el-button type="danger" @click="del(item.id)">删除</el-button>
        </div>
      </div>
    </el-card>
    <AddCallback v-if="dialogVisible" @close="closeHandle" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import AddCallback from "../../components/market/question/callback/AddCallback.vue";
import { AddParams, ListParams } from "../../api/market/callback/type";
import { delCallback, getCallbackList } from "../../api/market/callback/callback";
import { reactive } from "vue";
import { onMounted } from "vue";
import { ListData } from "../../api/market/callback/type";
import { ElMessage, ElMessageBox } from "element-plus";

const route = useRoute();

//dialog显示
const dialogVisible = ref(false);

//添加回访记录
const addCall = () => {
  dialogVisible.value = true;
};

//关闭添加dialog
const closeHandle = (data: boolean) => {
  dialogVisible.value = false;
  if (data) {
    //刷新数据
    getList();
  }
};

const listParams = reactive<ListParams>({
  page: 1,
  pageSize: 10,
  questionId: route.query.id ? Number(route.query.id) : 0,
});

//循环列表
let listData = ref<ListData[]>([]);
//获取列表信息
const getList = async () => {
  let res = await getCallbackList(listParams);
  if (res) {
    listData.value = res.list;
  }
};
//删除
const del = async (id: number) => {
  ElMessageBox.confirm("是否确认删除", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await delCallback(id);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      //刷新
      getList();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消 canceled",
      });
    });
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="less">
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;

  .card_box {
    display: flex;

    .title {
      margin-top: 10px;
    }

    .right {
      margin-left: 120px;
    }
  }

  .header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header_left {
      display: flex;
      align-items: center;

      .line {
        display: block;
        width: 6px;
        height: 20px;
        background-color: #529bfd;
        margin-right: 8px;
      }
    }
  }

  .list {
    margin-top: 20px;

    .item {
      width: 472px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .left {
        display: flex;
        flex: 1;

        .txt {
          margin-left: 10px;
          font-size: 14px;
        }

        .addtime {
          margin-bottom: 16px;
        }

        .color {
          color: #a8abc3;
        }
      }
    }
  }
}
</style>
